<template>
  <div class="container">
    <div
      class="list-item"
      v-for="(item, index) in list"
      v-show="$route.query.id != item.id"
      :key="index"
      @click="changePage(item.id)"
    >
      <img :src="item.image2" alt />
      <div>
        <div></div>
        <span>{{ item.name2 }}</span>
        <p>{{ item.description2 }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    changePage(i) {
      this.$router.push({
        path: "/Teacher/index",
        query: {
          id: i
        }
      });
    },
    getData(page) {
      let _this = this;
      _this.$axios
        .get("site/lesson", {
          params: {
            page: page
          }
        })
        .then(res => {
          _this.list = _this.list.concat(res.list);
          if (page < res.totalPage) {
            page++;
            _this.getData(page);
          }
        });
    }
  },
  created() {
    let _this = this;
    let page = 1;
    _this.getData(page);
  }
};
</script>

<style lang="less" scoped>
.container {
  width: @width;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100vw - 0.6rem);
  }
  > div {
    width: calc(50% - 0.15rem);
    height: 3.3rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: 100%;
      height: 4rem;
    }
    > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: all 600ms;
    }
    > div {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 0.3rem;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.5);
      transition: 300ms;
      transform: translateY(60%);
      > div {
        width: 10%;
        height: 5px;
        background: @gold-color;
        margin-bottom: 0.2rem;
      }
      span {
        font-size: @title-size;
      }
      p {
        width: 100%;
        font-size: @normal-size;
        line-height: @title-size;
        color: @node-color;
        font-weight: lighter;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        margin-top: 0.1rem;
      }
    }
  }
  > div:hover {
    > div {
      transform: translate(0);
      padding-top: 0.6rem;
    }
  }
}
</style>
